<template>
  <div class="person" @click.stop="toPath(item.path)">
    <div
      class="person-icon iconfont"
      :class="item.icon"
      :style="{ color: item.iconColor }"
      v-if="isShowIcon"
    >
      <div class="decimal" v-if="item.messageNum">{{ item.messageNum }}</div>
    </div>
    <div class="person-name">{{ item.name }}</div>
    <div class="person-number" v-if="item.isNumber">{{ item.isNumber }}</div>
    <div class="person-yjt iconfont icon-iconfontjiantou3"></div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field } from "vant";

Vue.use(Field);

export default {
  props: ["item", "isShowIcon", "index"],
  methods: {
    toPath(path) {
      let data = {
        path: path
      };
      if (this.index != undefined) {
        data["index"] = this.index;
      }
      this.$emit("to-path", data);
    },
    data() {
      return {
        value: ""
      };
    }
  }
};
</script>

<style scope lang="less">
.person {
  width: 100%;
  height: 50px;
  border-bottom: 0.5px solid #ddd;
  display: flex;
  padding-left: 10px;
  position: relative;
  background: #fff;
  .person-icon {
    width: 25px;
    height: 50px;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
    color: #e8443d;
    position: relative;

    /* 气泡小数 */
    .decimal {
      /* width: 30upx; */
      height: 15px;
      line-height: 15px;
      background-color: #e60012;
      text-align: center;
      font-size: 10px;
      color: #fff;
      border-radius: 8px;
      padding: 0 4px;
      position: absolute;
      left: 16px;
      top: 5px;
    }
  }

  .person-name {
    width: 150px;
    height: 100%;
    line-height: 50px;
    padding-left: 10px;
    font-size: 14px;
    color: #4b4b4b;
  }
  .person-number {
    width: 48px;
    height: 100%;
    line-height: 50px;
    text-align: right;
    padding-right: 5px;
    position: absolute;
    right: 30px;
    top: 0px;
    color: #ddd;
  }

  .person-yjt {
    width: 10px;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
    color: #898989;
    position: absolute;
    top: 18px;
    right: 13px;
  }
}
</style>
